import React, {useState} from 'react';
import './app.css';
import { DndProvider, useDrag } from 'react-dnd';
import { HTML5Backend } from 'react-dnd-html5-backend';    
const list: number[] = [];
for(let i = 0; i < 10; i++) {
    list.push(i);
}

function Box(props: {idx: number}) {
    const [,drager] = useDrag({type:'Box'});
    return <div ref={drager}className="item">{props.idx}</div>
}
function Container() {
    const [items, setItems] = useState<number[]>(list);
    return (
        <div className="container">
            {items.map(i => {
                return <Box key={i} idx={i}/>
            })}
        </div>
    );
}
export function App() {
    return (
        <DndProvider backend={HTML5Backend}>
            <Container></Container>
        </DndProvider>
    );
}